"use client";
import { LockOutlined, UserOutlined, QrcodeOutlined } from "@ant-design/icons";
import { LoginForm, ProFormText } from "@ant-design/pro-components";
import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import "./index.css";
import { userLoginUsingPost } from "@/api/userController";
import { message } from "antd";
import { useDispatch } from "react-redux";
import { AppDispatch } from "@/stores";
import { setLoginUser } from "@/stores/loginUser";
import { ProForm } from "@ant-design/pro-form/lib";
import { useRouter } from "next/navigation";
import { Tabs } from "antd";

type LoginType = "account" | "qrcode";

/**
 * 用户登录页面
 * @constructor
 */
const UserLoginPage: React.FC = () => {
    const [form] = ProForm.useForm();
    const dispatch = useDispatch<AppDispatch>();
    const router = useRouter();
    const [loginType, setLoginType] = useState<LoginType>("account");

    /**
     * 提交
     */
    const doSubmit = async (values: any) => {
        try {
            if (loginType === "account") {
                const res = await userLoginUsingPost(values);
                if (res.data) {
                    message.success("登录成功");
                    dispatch(setLoginUser(res.data));
                    router.replace("/");
                    form.resetFields();
                }
            } else {
                // 扫码登录验证逻辑
                message.success("验证码验证成功");
                router.replace("/");
            }
        } catch (e) {
            message.error("登录失败，" + e.message);
        }
    };

    return (
        <div id="userLoginPage">
            <LoginForm
                form={form}
                logo={
                    <Image
                        src="/assets/logo.png"
                        alt="JobMew"
                        height={44}
                        width={44}
                    />
                }
                title="JobMew - 用户登录"
                subTitle="可能是最棒的程序员求职刷题网站"
                onFinish={doSubmit}
            >
                <Tabs
                    centered
                    activeKey={loginType}
                    onChange={(activeKey) =>
                        setLoginType(activeKey as LoginType)
                    }
                >
                    <Tabs.TabPane key="account" tab="账号密码登录" />
                    <Tabs.TabPane key="qrcode" tab="扫码登录" />
                </Tabs>

                {loginType === "account" ? (
                    <>
                        <ProFormText
                            name="userAccount"
                            fieldProps={{
                                size: "large",
                                prefix: <UserOutlined />,
                            }}
                            placeholder={"请输入用户账号"}
                            rules={[
                                {
                                    required: true,
                                    message: "请输入用户账号!",
                                },
                            ]}
                        />
                        <ProFormText.Password
                            name="userPassword"
                            fieldProps={{
                                size: "large",
                                prefix: <LockOutlined />,
                            }}
                            placeholder={"请输入密码"}
                            rules={[
                                {
                                    required: true,
                                    message: "请输入密码！",
                                },
                            ]}
                        />
                    </>
                ) : (
                    <div style={{ textAlign: "center" }}>
                        <Image
                            src="/assets/QRcode.jpg" 
                            alt="公众号二维码"
                            width={200}
                            height={200}
                            style={{
                                margin: "16px 0",
                                border: "1px solid #f0f0f0",
                                borderRadius: "4px"
                            }}
                        />
                        <div style={{ 
                            color: "#666", 
                            marginBottom: "16px",
                            fontSize: "14px"
                        }}>
                            请扫码关注公众号，发送<b>「验证码」</b>获取登录验证码
                        </div>
                        
                        <ProFormText
                            name="captcha"
                            placeholder="请输入验证码"
                            fieldProps={{
                                size: "large",
                                prefix: <QrcodeOutlined />,
                            }}
                            rules={[
                                { 
                                    required: true, 
                                    message: "请输入验证码!" 
                                },
                                {
                                    pattern: /^\d{6}$/,
                                    message: "验证码必须是6位数字"
                                }
                            ]}
                        />
                    </div>
                )}

                <div
                    style={{
                        marginBlockEnd: 24,
                        textAlign: "end",
                    }}
                >
                    还没有账号？
                    <Link href={"/user/register"}>去注册</Link>
                </div>
            </LoginForm>
        </div>
    );
};

export default UserLoginPage;